<template>
  <div class="body">
    <!-- 整体布局开始 -->
    <div class="postMain">
      <!-- 标题开始 -->
      <div style="margin-left: 90px; margin-right: 50px; color: #454d49">
        <h1>{{ post.title }}</h1>
      </div>
      <!-- 标题 结束-->
      <!-- 时间头像和昵称啥的开始 -->
      <div class="head sticky-header">
        <el-avatar :size="70" :src="post.head"></el-avatar>
        <div
          style="
            display: flex;
            align-items: center;
            font-size: 24px;
            font-weight: 550;
            color: #ed6a12;
          "
        >
          {{ post.nickName }}
        </div>
        <div
          style="
            display: flex;
            align-items: center;
            margin-left: 370px;
            color: #9ea0a3;
          "
        >
          发布于{{ post.postingTime }}
        </div>
      </div>
      <!-- 头部，包括时间头像和昵称啥的结束 -->
      <!-- 显示富文本内容，根据百度查询，这个 class="ql-editor"必须要加上-->
      <div class="ql-editor" id="content" v-html="post.content"></div>
      <el-divider></el-divider>
    </div>
    <!-- 整体布局结束 -->
  </div>
</template>
    
<script>
import { getOnePost } from "../api/postMG";
export default {
  name: "PostDetails",
  data() {
    return {
      post: {},
    };
  },

  methods: {
    async getPost() {
      // 根据this.postId获取这篇文章的内容信息，其实就是列表界面获取到的那些数据，只不过有评论
      await getOnePost(this.postId).then((res) => {
        if (res.data.code == 200) {
          this.post = res.data.data;
        } else {
          this.$message.error(res.data.code + "::" + res.data.msg);
        }
      });
    },
  },
  mounted() {
    //获浏览器url字符串
    var currentURL = window.location.href;
    //定义为url类型
    var urlObj = new URL(currentURL);
    // 使用URLSearchParams接口获取查询参数
    var params = new URLSearchParams(urlObj.search);
    // 提取post参数的值,获取加密的postId，
    var postValue = params.get("post");
    //然后解密
    this.postId = decodeURIComponent(escape(window.atob(postValue)));
    // console.log(this.postId);
    //获取这篇文章的具体内容
    this.getPost();
    
  },
};
</script>

<style scoped>
.body {
  display: flex;
  justify-content: center;
  /* background-color: #f5f7fa; */
}
.postMain {
  width: 65%;
}
.head {
  display: flex;
  margin-left: 60px;
  padding-bottom: 20px;
  padding-top: 20px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2); /* 更强烈的凸出效果 */
}
/* 这个富文本默认下方有空白，我们设置成auto可以取消掉 */
.ql-editor {
  height: auto;
}

#content {
  text-indent: 2em;
  width: 80%;
  margin: 20px auto;
}
</style>
